﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <canvas id="priceCanvas" width="400" height="700" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasPrice = document.getElementById("priceCanvas"); //绘图区域
        canvasPrice.width = window.innerWidth;
        canvasPrice.height = window.innerHeight;
        let paintPrice = new FCPaint(); //绘图对象
        paintPrice.canvas = canvasPrice;
        scaleCanvas(paintPrice);
        //判断是否移动端
        paintPrice.isMobile = isMobileMode();
        if (paintPrice.isMobile) {
            paintPrice.scaleFactorX = 2.5;
            paintPrice.scaleFactorY = 2.5;
        }
        //判断主题色
        paintPrice.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintPrice.defaultUIStyle = "light";
        }
        addDefaultEvent(canvasPrice, paintPrice);
        //创建买卖档
        let priceList = new FCGrid();
        priceList.dock = "fill";
        //添加到框架
        addView(priceList, paintPrice);
        //根据主题配色
        if (priceList.paint.defaultUIStyle == "dark") {
            priceList.backColor = "rgb(0,0,0)";
            priceList.borderColor = "rgb(100,100,100)";
            priceList.textColor = "rgb(255,255,255)";
            priceList.scrollBarColor = "rgb(100,100,100)";
        } else if (priceList.paint.defaultUIStyle == "light") {
            priceList.backColor = "rgb(255,255,255)";
            priceList.borderColor = "rgb(150,150,150)";
            priceList.textColor = "rgb(0,0,0)";
            priceList.scrollBarColor = "rgb(200,200,200)";
        }

        priceList.rowHeight = 50;
        priceList.headerHeight = 20;
        //创建列头
        let column1Price = new FCGridColumn();
        column1Price.text = "id";
        column1Price.frozen = true;
        column1Price.widthStr = "100%";
        priceList.columns.push(column1Price);
        //根据主题配色
        if (priceList.paint.defaultUIStyle == "dark") {
            column1Price.backColor = "rgb(0,0,0)";
            column1Price.borderColor = "rgb(100,100,100)";
            column1Price.textColor = "rgb(255,255,255)";
        } else if (priceList.paint.defaultUIStyle == "light") {
            column1Price.backColor = "rgb(255,255,255)";
            column1Price.borderColor = "rgb(150,150,150)";
            column1Price.textColor = "rgb(0,0,0)";
        }

        /*
        * 重置大小
        */
        let resizeAll = function () {
            canvasPrice.width = document.documentElement.clientWidth;
            canvasPrice.height = document.documentElement.clientHeight;
            scaleCanvas(paintPrice);
            updateViewDefault(paintPrice.views);
            invalidate(paintPrice);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();

        };

        let upColor_Price = "rgb(219,68,83)"; //上涨颜色
        let downColor_Price = "rgb(15,193,118)"; //下跌颜色
        let upColor2_Price = "rgba(219,68,83,125)"; //上涨颜色
        let downColor2_Price = "rgba(15,193,118,125)"; //下跌颜色
        let textColor_Price = "rgb(255,255,255)"; //下跌颜色
        let maxVolume_Price = 0; //最大成交量

        /*
        * 绘制单元格
        * grid:表格
        * row:行
        * column:列
        * cell:单元格
        * paint:绘图对象
        * left:左侧坐标
        * top:上方坐标
        * right:右侧坐标
        * bottom:下方坐标
        */
        paintPrice.onPaintGridCell = function (grid, row, column, cell, paint, left, top, right, bottom) {
            let width = right - left, height = bottom - top;
            let baseUpper = "Code1";
            let font1 = "Default,16";
            let font2 = "Default,14";
            let font3 = "Default,12";
            let tSize = paint.textSize(baseUpper, font1);
            let quoteUpper = " /Code2";
            let strVolume = cell.volume.toFixed(6);
            let strPrice = cell.close.toFixed(6);
            let tSize2 = paint.textSize(strVolume, font3);
            let tSize3 = paint.textSize(strPrice, font2);
            let strPrice2 = "¥" + (cell.close * 7.24).toFixed(6);
            let diffRange = ((cell.close - cell.open) / cell.close * 100).toFixed(2) + "%";
            if (grid.paint.defaultUIStyle == "dark") {
                paint.drawText(baseUpper, "rgb(255,255,255)", font1, left + 5, top + height / 2 - tSize2.cy - tSize.cy / 2);
                paint.drawText(quoteUpper, "rgb(200,200,200)", font3, left + 5 + tSize.cx, top + height / 2 - tSize2.cy - tSize2.cy / 2);
                paint.drawText(strVolume, "rgb(200,200,200)", font3, left + 5, top + height / 2 + tSize2.cy - tSize2.cy / 2);
            } else if (grid.paint.defaultUIStyle == "light") {
                paint.drawText(baseUpper, "rgb(0,0,0)", font1, left + 5, top + height / 2 - tSize2.cy - tSize.cy / 2);
                paint.drawText(quoteUpper, "rgb(50,50,50)", font3, left + 5 + tSize.cx, top + height / 2 - tSize2.cy - tSize2.cy / 2);
                paint.drawText(strVolume, "rgb(50,50,50)", font3, left + 5, top + height / 2 + tSize2.cy - tSize2.cy / 2);
            }


            let tSize5 = paint.textSize("100000.00%", font1);
            let colRect = new FCRect(left + width * 0.7 + 5, top + height / 2 - tSize5.cy, left + width * 0.7 + 5 + tSize5.cx, top + height / 2 + tSize5.cy);
            let color = downColor_Price;
            if (cell.close >= cell.open) {
                color = upColor_Price;
            }
            paint.drawText(strPrice, color, font2, left + width * 0.4 + 5, top + height / 2 - tSize3.cy - tSize3.cy / 2);
            paint.drawText(strPrice2, color, font2, left + width * 0.4 + 5, top + height / 2 + tSize3.cy - tSize3.cy / 2);
            paint.fillRect(color, colRect.left, colRect.top, colRect.right, colRect.bottom);
            let tSize4 = paint.textSize(diffRange, font1);
            if (grid.paint.defaultUIStyle == "dark") {
                paint.drawText(diffRange, "rgb(255,255,255)", font1, left + width * 0.7 + 5 + tSize5.cx / 2 - tSize4.cx / 2, top + height / 2 - tSize4.cy / 2);
            } else if (grid.paint.defaultUIStyle == "light") {
                paint.drawText(diffRange, "rgb(0,0,0)", font1, left + width * 0.7 + 5 + tSize5.cx / 2 - tSize4.cx / 2, top + height / 2 - tSize4.cy / 2);
            }
        };

        /*
        * 绘制列
        * grid:表格
        * column:列
        * paint:绘图对象
        * left:左侧坐标
        * top:上方坐标
        * right:右侧坐标
        * bottom:下方坐标
        */
        paintPrice.onPaintGridColumn = function (grid, column, paint, left, top, right, bottom) {
            let width = right - left, height = bottom - top;
            let font2 = "Default,14";
            let tSize = paint.textSize("列1", font2);
            if (grid.paint.defaultUIStyle == "dark") {
                paint.fillRect("rgb(0,0,0)", left, top, right, bottom);
                paint.drawText("列1", "rgb(200,200,200)", font2, left + 5, top + height / 2 - tSize.cy / 2);
                paint.drawText("列2", "rgb(200,200,200)", font2, left + width * 0.4 + 5, top + height / 2 - tSize.cy / 2);
                paint.drawText("列3", "rgb(200,200,200)", font2, left + width * 0.7 + 5, top + height / 2 - tSize.cy / 2);
            } else if (grid.paint.defaultUIStyle == "light") {
                paint.fillRect("rgb(255,255,255)", left, top, right, bottom);
                paint.drawText("列1", "rgb(50,50,50)", font2, left + 5, top + height / 2 - tSize.cy / 2);
                paint.drawText("列2", "rgb(50,50,50)", font2, left + width * 0.4 + 5, top + height / 2 - tSize.cy / 2);
                paint.drawText("列3", "rgb(50,50,50)", font2, left + width * 0.7 + 5, top + height / 2 - tSize.cy / 2);
            }
        };

        /*
        * 表格的点击方法
        * grid: 表格
        * row: 行
        * column: 列
        * cell: 单元格
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        paintPrice.onClickGridCell = function (grid, row, column, cell, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            let baseUpper = cell.data.base.toUpperCase();
            let quoteUpper = baseUpper + "/" + cell.data.quote.toUpperCase();
            window.chrome.webview.postMessage(quoteUpper);
        };

        /*
        * 表格的列点击方法
        * grid: 表格
        * column: 列
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        paintPrice.onClickGridColumn = function (grid, gridColumn, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
        };

        let allowPaint_Price = false;

        /*
        * 检查绘图
        */
        let checkPricePaint = function () {
            if (allowPaint_Price) {
                allowPaint_Price = false;
                invalidateView(priceList);
            }
        };

        //启动秒表
        setInterval(checkPricePaint, 300);

        for (let i = 0; i < 100; i++) {
            let row = new FCGridRow;
            priceList.rows.push(row);
            let cell = new FCGridCell();
            cell.font = "Default,16";
            cell.colSpan = 1;
            cell.rowSpan = 1;
            cell.open = Math.random() * 90 + 10;
            cell.close = Math.random() * 90 + 10;
            cell.volume = Math.random() * 900 + 100;
            cell.update = 0;
            row.cells.push(cell);
        }
        updateViewDefault(paintPrice.views);
        //刷新界面
        invalidate(paintPrice);

        //Python调用的方法
        let callFromPython = function (cmd) {
            alert(cmd);
        };
    </script>
</body>
</html>
